var all = document.querySelector('.all')
var search=location.search;
// 获取cookie中的值
var name1=getCookie1('name');
if(name1){
    $('.login_int .text .icon').prop("style","display:none")
    $('.login_int .text .longin').html(name1)
}else{
    $('.login_int .text .icon').prop("style","display:black")
    $('.login_int .text .longin').html('登录')
}
//如果name1有值跳转到购物车页面，如果没值跳转到登录页面
$(".logo").click(function(e){
    var tg = e.target;
    if(tg.className=="longin"){
        if(name1){
            var url=location.href;
            //跳到购物车页面，并且保存当前的页面信息
            location ="./gwx.html?url2="+url;  
        }else{
            //跳转到登陆页面，并且保存当前页面，用于登录完成后跳转
            var url=location.href;
        location ="./logn.html?url2="+url;
        }
    }
})
//获取数据库的数据，把数据渲染到对应位置中
$.get('../php/show1.php',function(dt){
    var str=""
    var ar2=eval('('+dt+')');
    for(var i=0;i<6;i++){
        str+=`
        <li class="item1">
            <a href="xqy.html?id=${ar2[i].rt_id}">
                <div class="discount" style="display:none;">
                    <span class="amount">
                        7.9
                    </span>
                    <span class="zhe">
                        折
                    </span>
                </div>
                <div class="hot-top">
                    <span class="amount">2325</span>
                    <div class="fire">
                        <img src="../first_img/hot.a33590cb.png" alt="">
                        <span>
                            想看
                        </span>
                    </div>
                
                </div>
                <div style=" background-image: url(${ar2[i].rt_img}); " class="poster1"> 

                </div>
                <div class="info">
                    <div class="title2">
                       ${ar2[i].rt_name}
                    </div>
                    <div class="price">
                        <span class="unit">￥</span>
                        <span class="amount">${ar2[i].rt_price}</span>起
                    </div>
                </div>
            </a>
        </li>
        `
    }
    $('.ad_1 .center .bottom ul').html(str);
    str='';
    for(var i=6;i<12;i++){
        str+= `
        <li class="item1">
        <a href="xqy.html?id=${ar2[i].rt_id}">
            <div class="discount" >
                <span class="amount">
                    5.4
                </span>
                <span class="zhe">
                    折
                </span>
            </div>
                <div style=" background-image: url(${ar2[i].rt_img}); " class="poster1"> 
                </div>
                <div class="info">
                    <div class="title2">
                   
                    ${ar2[i].rt_name}
                    </div>
                    <div class="price">
                        <span class="unit">￥</span>
                        <span class="amount">${ar2[i].rt_price}</span>
                        <span class="unitory">￥</span>
                        <span class="amount-orang">${ar2[i].rt_price}</span>
                    </div>
                </div>
            </a>
        </li>
        `
    }
    $('.ad_2 .center .bottom ul').html(str);
    
    //根据演出的项目分类
    //使用函数生成对应的项目栏4
    start_5($('.first_1'),'演唱会',1,"",0); 
    start_5($('.first_2'),'歌剧话剧',2,"",34); 
    start_5($('.first_3'),'休闲展览',5,"",68); 

    stat_8($('.secand_1 .center'),"旅游玩乐",2);
    stat_8($('.secand_2 .center'),"旅游玩乐",1);
    stat_8($('.secand_3 .center'),"旅游玩乐",5);
})

//每周推荐
function everyweek(){
    $.get('../php/show1.php',function(dt){
        var str='';
        var ar2 = eval('('+dt+')');
        for(let i=0;i<4;i++){
            str+=`
                <div style="background-image: url(${ar2[i].rt_img});"class="pic${i}"></div>
            `
        }
        $('.pic').html(str);
    })  
}
everyweek();
//轮播图生成函数
function lunbo(){
    var str='';
    $.get('../php/show1.php',function(dt){
        var ar2= eval('('+dt+')');
        for(let a=0;a<5;a++){
            str+=`
            <li style="left:-980px">
                <a href="xqy.html?id=${ar2[a].rt_id}">
                    <img src="${ar2[a].rt_img}" alt="">
                </a>
            </li>
            `
        }
        $('.top-pic').html(str);
        $('.top-pic li:nth-of-type(1)').prop("style",'left:0');
    })
}
lunbo();

//生成一个左边大页面，右边4个小页面
function start_5(obj,text,num,first,position1){
     var first = first || '';//first为指定的信息
     var str2="";
     var str_all=""
    $.get('../php/show1.php',function(dt){
        var str='';
        var ar2 = eval('('+dt+')');
        var xch=[];
        ar2.forEach(item=>{
            if(item.rt_category_id==num){
                xch.push((item.rt_id)-1);
            }
        })
        if(first){ 
            str=`
            <ul class="left">
                <li class="first">
                    <a href="xqy.html?id=${ar2[xch[first]].rt_id}" class="big-pic">
                        <img src="${ar2[xch[first]].rt_img}" alt="">
                    </a>
                    <div class="meng">
                        <a href="xqy.html?id=${ar2[xch[first]].rt_id}">
                            ${ar2[xch[first]].rt_name}
                        </a>
                        <div class="price">
                            <span class="unit">￥</span>
                            <span class="amount"> ${ar2[xch[first]].rt_price}</span>起
                        </div>
                    </div>
                </li>
            </ul>
            `
           for(let i=0;i<5;i++){
                str2+=`
                <li  class="small-pic">
                    <a href="xqy.html?id=${ar2[xch[i]].rt_id}">
                        <img src="${ar2[xch[i]].rt_img}" alt="">
                    </a>
                    <div class="oth">
                        <div>
                            <a href="xqy.html?id=${ar2[xch[i]].rt_id}">
                            ${ar2[xch[i]].rt_name}
                            </a>
                        </div>
                        <div class="rank">
                            <div class="star"></div>
                            <div class="num">10.0</div>
                        </div>
                        <div class="time">${ar2[xch[i]].rt_show_time}</div>
                        <a href="#" class="shop">票牛商城</a>
                        <div class="price">
                            <span class="unit">￥</span>
                            <span class="amount">${ar2[xch[i]].rt_price}</span>起
                        </div>
                    </div>
                </li>
                `
           }
        }else{
            str=`
            <ul class="left">
                <li class="first">
                    <a href="xqy.html?id=${ar2[xch[0]].rt_id}" class="big-pic">
                        <img src="${ar2[xch[0]].rt_img}" alt="">
                    </a>
                    <div class="meng">
                        <a href="xqy.html?id=${ar2[xch[0]].rt_id}">
                            ${ar2[xch[0]].rt_name}
                        </a>
                        <div class="price">
                            <span class="unit">￥</span>
                            <span class="amount"> ${ar2[xch[0]].rt_price}</span>起
                        </div>
                    </div>
                </li>
            </ul>
            `
           for(let i=1;i<5;i++){
                str2+=`
                <li  class="small-pic">
                    <a href="xqy.html?id=${ar2[xch[i]].rt_id}">
                        <img src="${ar2[xch[i]].rt_img}" alt="">
                    </a>
                    <div class="oth">
                        <div>
                            <a href="xqy.html?id=${ar2[xch[i]].rt_id}">
                            ${ar2[xch[i]].rt_name}
                            </a>
                        </div>
                        <div class="rank">
                            <div class="star"></div>
                            <div class="num">10.0</div>
                        </div>
                        <div class="time">${ar2[xch[i]].rt_show_time}</div>
                        <a href="#" class="shop">票牛商城</a>
                        <div class="price">
                            <span class="unit">￥</span>
                            <span class="amount">${ar2[xch[i]].rt_price}</span>起
                        </div>
                    </div>
                </li>
                `
           }
        }
        str_all=`
        <div class="center">
                 <div class="top">
                     <a href="show1.html?showid=${num}">
                        <div class="title-icon" style="background-position: 0 -${position1}px;"></div>
                        <span>${text}</span>
                     </a>
                     <a href="show1.html?showid=${num}" class="more">
                        更多
                     </a>
                 </div>
                 <div class="bottom">
                        ${str}
                    <ul class="right">
                        ${str2}
                    </ul>'
                 </div>
             </div>
         </div>
        `
        obj.html(str_all);
    })
}

//生成 分类展示类型二：一排小图的函数
function stat_8(obj,text,num){
    var str4="",str3="" , num1=0;
    $.get('../php/show1.php',function(dt){
        var str=""
        var ar2=eval('('+dt+')');
        var xun=[];
        ar2.forEach(item=>{
            if(item.rt_category_id==num){
                xun.push(item.rt_id);
            }
        })
        if(xun.length>8){
            for(var i=0;i<8;i++){
                str3+=`
                <li>
                    <a href="xqy.html?id=${ar2[xun[i]].rt_id}">
                        <div class="discount">
                            <span class="amount">
                                7.9
                            </span>
                            <span class="zhe">
                                折
                            </span>
                        </div>
                        <div class="ad_8_pic" style="background-image:url(${ar2[xun[i]].rt_img})"></div>
                        <div class="ad_8_title">${ar2[xun[i]].rt_name}</div>
                        <div class="price">
                            <span class="unit">￥</span>
                            <span class="amount">${ar2[xun[i]].rt_price}</span>起
                        </div>
                    </a>
                </li>
                `
            }
        }else{
            for(var i=0;i<xun.length;i++){
                str3+=`
                <li>
                    <a href="xqy.html?id=${ar2[xun[i]].rt_id}">
                        <div class="discount">
                            <span class="amount">
                                7.9
                            </span>
                            <span class="zhe">
                                折
                            </span>
                        </div>
                        <div class="ad_8_pic" style="background-image:url(${ar2[xun[i]].rt_img})"></div>
                        <div class="ad_8_title">${ar2[xun[i]].rt_name}</div>
                        <div class="price">
                            <span class="unit">￥</span>
                            <span class="amount">${ar2[xun[i]].rt_price}</span>起
                        </div>
                    </a>
                </li>
                `
            }
        }
        str4=`
            <div class="top">
                <a href="xqy.html?id=${num1}">
                    <div class="title-icon"></div>
                    <span>${text}</span>
                </a>
                <a href="#" class="more">
                    更多
                </a>
            </div>
            <ul class="bottom">
               ${str3}
            </ul>
        `
       obj.html(str4);
    })  
}

//绑定搜索框的点击事件
$(".logo").click(function(e){
    var tg = e.target;
     if(tg.className=="search-buttom"){
        var txt1 = $(".input").val();
        if(txt1){
            location=`./show1.html?valu=${txt1}`
        }
    }
})


var xd=true;
var dsq;
//设置当前图片下标
var index1=0
//设置即将要显示的图片下标
var index2=0
//给右边按钮绑定点击事件
$('.next').click(function(){
    if(xd){
        xd=false;
        autoMove();
    }
})
//给左边按钮绑定点击事件
$('.prev').click(function(){
    if(xd){
        xd=false;
        index2--
        if(index2<0){
            index2=4
        }
        $('.top-pic  li').eq(index2).css('left','-980px')
        $(".top-pic   li").eq(index2).animate({left:0},500)
        $('.top-pic  li').eq(index1).animate({left:980},500)
        $('.xia li').eq(index2).addClass('bg').siblings().removeClass('bg')
        index1=index2
        xd=true;
    }
})
//图片轮播函数
function autoMove(){
    //修改即将要显示的图片下标
    index2++
    if(index2>4){
        index2=0
    }
    //给即将要显示的图片设置位置
    $('.top-pic  li').eq(index2).css('left',"980px")
    //给即将要显示的图片设置动画
    $('.top-pic  li').eq(index2).animate({left:0},500)
    //给现在显示的图片也设置动画
    $('.top-pic  li').eq(index1).animate({left:-980},500)
    //设置按钮，给当前图片所对应的按钮设置class属性值
    $('.xia li').eq(index2).addClass('bg').siblings().removeClass('bg')
    index1=index2
    xd=true;
}

if(xd){
    dsq=setInterval(autoMove,3000); 
}
//自动轮播

//给大盒子对象绑定鼠标移入移出事件
$('.top-show').hover(function(){
    clearInterval(dsq)
},function(){
    dsq=setInterval(autoMove,3000)
})

//给数字按钮绑定点击事件
$('.xia li').click(function(){
    //获取当前点击的按钮下标
    var ind=$(this).index('.xia li')
    //把当前获取的按钮下标赋值给index2
    index2=ind

    //给即将要显示的图片设置位置
    $('.top-pic  li').eq(index2).css('left',"980px")
    //给即将要显示的图片设置动画
    $('.top-pic  li').eq(index2).animate({left:0},500)
    //给现在显示的图片也设置动画
    $('.top-pic  li').eq(index1).animate({left:-980},500)
    //设置按钮，给当前图片所对应的按钮设置class属性值
    $('.xia li').eq(index2).addClass('bg').siblings().removeClass('bg')
    index1=index2
})





